---
import WebGPULayout from "../../layouts/WebGPULayout.astro";
---

<WebGPULayout>
  <div class="action">
    <div>
      <label for="rangeX">调整水平位置</label>
      <input id="rangeX" type="range">
    </div>
    <div>
      <label for="rangeY">调整垂直位置</label>
      <input id="rangeY" type="range">
    </div>
    <div>
      <label for="color">调整颜色</label>
      <input id="color" type="color" value="#ffffff">
    </div>
  </div>
</WebGPULayout>

<script src="../../scripts/traingle/demo2.ts"></script>

<style>
  .action {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
  }
</style>